{% extends 'layout/base.html' %}
{% load static %}

{% block css %}
    <style>
        .row a {
            text-decoration: none;
        }
    </style>
{% endblock css %}

{% block content %}
    <div class="row">
        {% for note in notes %}
            <div class="col-sm-6 col-md-4 col-lg-3">
                <a href="{% url 'blog:article' note.id %}">
                    <div class="thumbnail">
                        <img src="{{ note.top_image }}" alt="{{ note.title }}">
                        <div class="caption">
                            <h3>{{ note.title }}</h3>
                        </div>
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>
    {% if count > 12 %}
        <div aria-label="..." style="margin-bottom: 60px;float: right">
            <ul class="pagination" style="margin-top: 0;">
                {{ page_html|safe }}
            </ul>
        </div>
    {% endif %}
{% endblock content %}